<template>
  <div class="app-container">
    <!-- <button @click="toUrl('wenda/meirongNei')">内部助手</button>
    <button @click="toUrl('/wenda/meirong')">美容顾问</button> -->
    <el-row justify="center" style="padding-top: 20px;">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6" v-for="(item, i) in list" class="colClass" >
        <el-card :class="item.type=='100'?'card-div':'card-div card-div2'"  shadow="hover" style="border:0;border-radius: 10px;padding:0;">
            <div @click="checkOut(item)" class="card-div-content">
              <div class="card-title">{{ item.title }}</div>
              <!-- <span class="card-icon icon iconfont" :icon-class="item.icon"></span> -->
              <!-- <svg-icon class="card-icon icon iconfont" :icon-class="item.icon" /> -->
              <i :class="item.icon" class="card-icon" />
            </div>
        </el-card>
      </el-col>
    </el-row>
    <a class="setBtn" href="/#/login" size="medium" ><span class="iconBtn icon iconfont icon-shezhi" style="font-size: 29px; color:#727272;"/></a>

  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Home",
    ...mapGetters(["user","token"]),
  data() {
    return {
      list: [{
        id: 1,
        title: "内部助手",
        icon: "icon iconfont icon-zixun",
        url: "/wenda/meirongNei",
        type: "100"
      },
      {
        id: 2,
        title: "美容顾问",
        icon: "icon iconfont icon-jiankang",
        url: "/wenda/meirong",
        type: "100"
      },

      ],
      showFullTextIndex: null, // 当前显示完整内容的索引
      meteors: [], // 存储流星对象
    };
  },
  created() {
    // this.getHomeList();
    // this.generateMeteors();
    if(!this.$store.getters.token){
      console.log("未登录");
      this.$router.push({
        path: '/login'
      });
    }
  },
  methods: {
    toUrl(url,data={}) {
      console.log(url);
      this.$router.push(url);
    },

    funcIntroduction(text) {
      return text.replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
    },
    checkOut(item) {
      // if(!item.assisId){
      //   this.$modal.msgError("当前模块未配置对应助手");
      //   return false
      // }
      console.log(item);
      this.$router.push({
        path: item.url,
        query: { id:item.id, key:item.key, assisId:item.assisId }
      });
    },
    generateMeteors() {
      for (let i = 0; i < 15; i++) {
        this.meteors.push({
          style: {
            // 随机设置流星的初始位置
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            // 随机设置流星的动画延迟
            animationDelay: `${Math.random() * 5}s`,
            // 随机设置流星的动画持续时间
            animationDuration: `${5 + Math.random() * 3}s`
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height:100vh !important;
  padding:55px;
  background: -webkit-linear-gradient(#C2DBFA,#DAE0FA,#F5F6FA);
  background: linear-gradient( #C2DBFA,#DAE0FA, #F5F6FA);
  overflow-y: auto;

  .colClass {
    padding: 5px;

    .box-card {
      border: none;
      border-radius: 15px;

      ::v-deep .el-card__body {
        background: #dcdfe6;
        padding: 1rem;
      }

      .clearfix {
        position: relative;
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }

        .titleClass {
          font-size: 1.2rem;
          font-weight: 700;
          flex: 1;
        }

        button {
          float: none;
          margin-left: auto;
        }
      }

      .text {
        font-size: 0.9rem;
        color: #606266;
        line-height: 1.6;
        white-space: pre-wrap;

        // 默认状态：限制高度并显示省略号
        max-height: 20vh;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 4; // 根据需要调整行数
        -webkit-line-clamp: 4; // 根据需要调整行数
        -webkit-box-orient: vertical;

        // 鼠标悬停时：显示完整内容
        &.full-content {
          max-height: none;
          overflow: visible;
          line-clamp: unset;
          -webkit-line-clamp: unset;
        }
      }
    }
  }

  .meteor-container {
    position: fixed; /* 关键修改：改为固定定位 */
    width: 100%;    /* 使用视口宽度 */
    height: 100%;   /* 使用视口高度 */
    top: 0;
    left: 0;
    pointer-events: none; // 防止流星影响其他元素的交互
    z-index: 0; // 确保流星在背景层
  }

  .meteor {
    position: absolute;
    width: 100px; // 流星的宽度
    height: 2px; // 流星的高度
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(135deg); // 旋转流星，使头部在下、尾部在上
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); // 添加阴影效果
    animation: meteorFall 5s linear infinite; // 应用流星下落动画
    opacity: 0; // 初始透明度为0

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 15px 3px rgba(255,255,255,0.5); // 添加流星尾部的光晕效果
    }
  }

  @keyframes meteorFall {
    0% {
      opacity: 0; // 初始透明度为0
      transform: rotate(135deg) translateX(-100%) translateY(100%); // 从屏幕右上角开始
    }
    20% {
      opacity: 1; // 20%时达到最大透明度
    }
    80% {
      opacity: 1; // 保持最大透明度直到80%
    }
    100% {
      opacity: 0; // 结束时透明度为0
      transform: rotate(135deg) translateX(100%) translateY(-100%); // 到达屏幕左下角
    }
  }



.card-div{
  height:320px;
  background: rgb(115, 177, 235);
  position: relative;
}

.card-div2{
  height:155px;
  background: rgb(156, 202, 245);
}
.card-div .card-div-content{
  height:100%;
  background: rgba(93, 162, 226, 1);
  box-shadow: 0 0 10px 10px rgba(93, 162, 226, 1);
  border-radius: 0 0 0 70%;
}
.card-div2 .card-div-content{
  height:100%;
  background: rgb(134, 192, 247);
  box-shadow: 0 0 10px 10px rgb(134, 192, 247);
  border-radius: 0 0 0 70%;
}
.card-title{
  padding:38px 20px;
  font-size: 25px;
  color:#fff;
}
.card-icon{
  font-size: 150px;
  color:rgba(255, 255, 255, 0.2);
  position:absolute;
  right:30px;
  bottom:-20px;
  transform:rotate(15deg);
}
.setBtn{
  position:fixed;
  bottom:20px;
  right:20px;
}
@media(min-width:1920px){
  .app-container {height: calc(100vh - 50px);}
  .card-div2{
    height:320px !important;
  }
}
  @media (max-width: 768px) {
    .app-container {padding:10px;}
    .card-div{
      height:160px !important;
    }
    .card-div2{
      height:75px !important;
    }
    .colClass {
      .box-card {
        .text {
          font-size: 0.8rem;
        }
      }
    }
    .card-div .card-icon{
      font-size: 80px;
      right:20px;
      bottom:-10px;
    }
    .card-title{
      padding: 0px 5px;
      font-size: 16px;
    }
  }
  // 响应式设计

  @media (max-width: 480px) {
    .colClass {
      .box-card {
        .text {
          font-size: 0.7rem;
        }
      }
    }
  }
}
</style>
